<template>
  <div style="padding: 22px 10px 10px">
    <h4 class="title">举报管理</h4>
    <div class="mainBody" v-for="report in reportList" :key="report.id">
      <div
          style="
            height: auto;
            display: flex;
            flex-direction: row;
            box-shadow: 0 0 15px -10px gray;
            margin-top: 10px;
          "
      >
        <div class="reportInfo">
          <span>举报用户 <a>{{report.targetDetail}}</a> ，举报原因如下：</span> <br/>

          <a-checkbox-group v-model:value="report.value" :options="report.reasonList"/><br/>
          <a-checkbox v-model:checked="report.other.ifChecked">其它</a-checkbox>
          <a-textarea v-model:value="report.other.content" show-count :maxlength="100"/>
        </div>
        <div class="usersPhoto">
          <a-image
              :width="60"
              :src="'/api' + report.suserAvatar"
          />
        </div>
        <div class="handle">
          <span><b>举报人：</b> {{report.suserName}}</span><br/>
          <span><b>举报时间：</b>{{report.time}}</span><br/>
          <span><b>举报进度：</b>{{map[report.state]}}</span><br/>
          <a-button v-if="report.state === 0" class="button" type="primary" @click="pass(report)">通过</a-button>
          <a-button v-if="report.state === 0" class="button" type="primary" danger @click="reject(report)">驳回</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { get, put, tip} from "@/common";
import { ref } from "vue";

const reportList = ref({});

const map = ref({
  0: "待审核...",
  1: "审核通过",
  2: "审核未通过"
})

const handleClick = (menuInfo) => {
  console.log("click ", menuInfo);
};

const getReportList = () => {
  get("/report/list").then((res) => {
    reportList.value = res.data;
    for (const i in reportList.value) {
      reportList.value[i].reasonList = []
      reportList.value[i].value = []
      for (const j in reportList.value[i].reportReasonList) {
        if (reportList.value[i].reportReasonList[j].reasonId !== 0) {
          const formReason = {
            label: reportList.value[i].reportReasonList[j].reasonWhy,
            value: reportList.value[i].reportReasonList[j].reasonId,
          }
          reportList.value[i].reasonList.push(formReason)
          if (reportList.value[i].reportReasonList[j].ifChecked) {
            reportList.value[i].value.push(reportList.value[i].reportReasonList[j].reasonId)
          }
        } else {
          reportList.value[i].other = {
            ifChecked: reportList.value[i].reportReasonList[j].ifChecked,
            content: reportList.value[i].reportReasonList[j].reasonWhy
          };
        }
      }
    }
    console.log(reportList.value);
  })
}

const pass = (report) => {
  put("/report/pass", report).then(() => {
    tip.success("举报审核通过！")
    report.state=1
  })

}

const reject = (report) => {
  put("/report/reject/" + report.id).then(() => {
    tip.success("驳回举报！")
    report.state=2
  })
}

getReportList()
</script>

<style scoped>
.title {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.mainBody {
  padding: 10px 10px 10px;
}

.usersPhoto {
  width: 120px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.reportInfo {
  padding: 20px;
  width: 600px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.handle {
  padding-top: 20px;
}

.button {
  margin-top: 15px;
  margin-left: 20px;
  margin-right: 15px;
}
</style>